<template>
  <div class="page">
    <heads></heads>
    <div class="page-content" style="width: 100%;background: #fff">
      <div class="formB">
        <form>
          <mt-field class="text-red" label="姓名" disableClear :state="isName" v-model="names"   placeholder="输入姓名" type="text"></mt-field>
          <mt-field class="text-red" label="身份证" disableClear :state="istels"  v-model="tels"  :attr="{ maxlength: 18 }"  placeholder="输入身份证号码" type="tel"></mt-field>
          <!-- <mt-field label="收货地址" disableClear  v-model="coteIp"  placeholder="输入收货地址" type="text"></mt-field> -->
        </form>
        <div class="form-control">
          <mt-button class="form-button default"  @click="getInfo()">保存</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import heads from '../components/header'
  import { Loadmore,Toast ,MessageBox } from 'mint-ui';
  import MtButton from "../../node_modules/mint-ui/packages/button/src/button";
  export default {
    data(){
      return{
        names:[],
        tels:[],
        coteIp:[],
        // telRex:/^1[3|4|5|7|8]\d{9}$/,
        telRex:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        isName:'',
        istels:'',
        iscote:'',
        isMsg:'',
      }
    },
    mounted(){
//        this.userInfo()
    },
    methods:{
//      userInfo(){
//        this.$http(this.API.userIfo, {
//          data: {}
//        }).then(function (res) {
//         console.log(res);
//        }).catch(function (err) {
//          console.log(err);
//        });
//      },
      getInfo(){
        const _this=this;
        if(!this.changeName()){//||!this.changeTels()|| !this.changeIp()
          MessageBox.alert(this.isMsg);
          return false
        }else {

          this.$http(this.API.certificate, {
            data: {
              acptName: encodeURI(encodeURI(_this.names)),
              acptTel: _this.tels,
              // acptAddress: encodeURI(encodeURI(_this.coteIp)),
            }
          }).then(function (res) {
            MessageBox.alert(res.message);
          }).catch(function (err) {
            console.log(err);
          });
        }
      },
      changeName(){
        if(this.names==''){
          this.isName='warning';
          this.isMsg='请输入姓名'
          return false
        }else if(!(/[\u4e00-\u9fa5]/).test(this.names)){
          this.isName='warning';
          this.isMsg='姓名输入格式错误'
          return false
        }else{
          this.isName='success';
          return true
        }
      },
      changeTels:function () {
        if(this.tels==''){
          this.istels='warning';
          this.isMsg='请输入身份证号码'
          return false
        }else if(!(this.telRex).test(this.tels)){
          this.istels='error';
          this.isMsg='身份证号输入格式错误'
          return false
        }else{
          this.istels='success';
          return true
        }
        
      },
      // changeIp(){
      //   if(this.coteIp==''){
      //     this.iscote='warning';
      //     this.isMsg='请输入地址'
      //     return false
      //   }else{
      //     this.iscote='success';
      //     return true
      //   }
      // },
    },
    components: {
      MtButton,
      heads
    }

  }
</script>
<style>
  @import "../sass/pageScss/prize.scss";
</style>

